<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习1</title>
<style>
body,ul,dl,dd{margin:0; padding:0;font-family:"宋体"；}
li{list-style:none;}
a{text-decoration:none;color:#4f6c84;}
img{border:none;vertical-align:top;}
.clear{zoom:1;}
.clear:after{content:""; display:block; clear:both;}

.wrap{width:445px; margin:30px auto;padding:12px 8px 0 7px;background:url(img/bg.gif) no-repeat 220px 0;}
.left{width:212px; float:left;}/* 用偶数px */
.leftTop .pic{width:124px; background:url(img/picBg.gif) no-repeat right 0;padding-right:5px;float:left;}/* 背景5px宽所以加右宽 */
.leftTop .pic a{border:1px solid #c3cfd9; display:block; padding:3px;height:86px;}
.leftTop dl{float:left; width:60px;padding-left:5px; font-size:12px;line-height:20px;color:#7190a6;}/* 能不用margin和浮动同时出现就尽量避免同时出现，可以的话就用padding */
.leftBottom{padding-top:10px;}
.leftBottom li{line-height:20px; font-size:12px; padding-left:10px;background:url(img/liBg.gif) no-repeat 0 7px;}
.right{width:220px; float:right;}
.right li{width:100px; float:right;padding-left:10px;}
.right li a{display:block;}
.right li img{border:1px solid #c3cfd9;padding:3px;}
.right strong{display:block;padding-top:3px;font:normal 12px/24px "宋体";text-align:center;}
</style>
</head>
<div class="wrap clear">
  <div class="left">
    <div class="leftTop clear">
      <div class="pic">
        <a href="#">
          <img src="img/pic.gif" />
        </a>
      </div>
        <dl>
          <dt><a href="#">潜伏</a></dt>
          <dd>导演：姜伟</dd>
          <dd>主演：姚晨 孙红雷</dd>
        </dl>
    </div>
    <ul class="leftBottom">
      <li>
        <a href="#">海清张嘉译演绎房奴生活《蜗居》</a>
      </li>
       <li>
        <a href="#">琼瑶经典言情剧集锦</a>
        <a href="#">梦露电影知多少</a>
      </li>
    </ul>
  </div>
  <ul class="right">
    <li>
      <a href="#">
        <img src="img/pic2.gif" />
        <strong>将爱情进行到底</strong>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="img/pic2.gif" />
        <strong>将爱情进行到底</strong>
      </a>
    </li>
  </ul>
</div>
<body>
</body>
</html>
